<div id = "form-content"  class="frmcontent">
    <div class="ti-tabs">
        <ul class="idTabs">
            <li><a class="selected" id="Tab01" title="DANH SÁCH DANH MỤC ĐỐI TƯỢNG" href="#Tab-01">DANH SÁCH DANH MỤC ĐỐI TƯỢNG</a></li>
            <li><a class="" id="Tab02" title="CẬP NHẬT" href="#Tab-02">CẬP NHẬT ĐỐI TƯỢNG DANH MỤC</a></li>
        </ul> 
        <div id="Tab-01" class="content" style="display: none;">
            <form>
                <input type="hidden" id="hdn_ListtypeID" name="hdn_ListtypeID" value="" />
                <!-- Danh sach -->
                <div id="dsplist"></div>
                <div>
                    <div class="button-left">
                        <input type="button" id="refresh" name="refresh" value="Tìm kiếm" />
                    </div>
                    <div class="button-right">
                        <input type="button" id="addrow" name="addrow" value="Thêm mới" />
                        <input type="button" id="editrow" name="editrow" value="Sửa" />
                        <input type="button" id="deleterow" name="deleterow" value="Xóa" />
                    </div>
                </div>
                <div id="jqxWidget">
                    <div id="jqxgrid"></div>
                </div>
            </form>
        </div>
        <div id="Tab-02" class="content" style="display: none;">
            <form>
                Màn hình sửa
            </form>
        </div>  
    </div>
</div>

<div id='ListMenu'>
    <ul>
        <li id="mn-add">Thêm mới</li>
        <li id="mn-edit">Sửa row đã chọn</li>
        <li id="mn-delete">Xóa row đã chọn</li>
    </ul>
</div>
<script type="text/javascript">
    var dList = new System_Admin_List({module: 'system', controller: 'list'}); dList.initialize();
    var objGrid = $('#jqxgrid');
    dList.obGridView = objGrid;
    var filterlisttype = $.parseJSON('<?=$this->filterlisttype;?>')
        ,check = 1;

    $(document).ready(function() {
        $(".idTabs").idTabs();
        // prepare the data
        var theme = 'energyblue';
        $('#listBoxgridpagerlistjqxgrid').remove();

       /* var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
              if (value < 20) {
                  return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #0000ff;">' + value + '</span>';
              }
              else {
                  return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
              }
          }
*/
        var source ={
              datatype: "json",
              datafields: [
                {name: 'ListID', type: 'string'},
                {name: 'ListtypeID', type: 'string'},
                {name: 'ListtypeName', type: 'string'},
                {name: 'Code', type: 'string'},
                {name: 'Name', type: 'string'},
                {name: 'Orders', type: 'string'},
                {name: 'Status', type: 'string'},
              ],
              url: baseUrl + '/system/list/data',
              id: 'ListID',
              root: 'Rows',
              cache: false,
              filter: function(){
                // update the grid and send a request to the server.
                var filterInfo = $("#jqxgrid").jqxGrid('getfilterinformation','ListtypeName');
                for (var i = 0; i < filterInfo.length; i++) {
                  if(filterInfo[i].filtercolumn =='ListtypeName'){
                      var value = filterInfo[i].filter.getfilters()[0].value;
                      var arr = value.split('##');
                      $('#hdn_ListtypeID').val(arr[1]);
                      break;
                  }
                };

                $(objGrid).jqxGrid('updatebounddata', 'filter');
              },
              sort: function(){
                // update the grid and send a request to the server.
                $(objGrid).jqxGrid('updatebounddata', 'sort');
              },
              root: 'Rows',
              beforeprocessing: function(data){
                source.totalrecords = data[0].TotalRows;
              },
              deleterow: function(rowid, commit) {
                commit(true);
              }
        };
        var dataadapter = new $.jqx.dataAdapter(source, {
              loadError: function(xhr, status, error){
                  alert(error);
              }
            }
        );
        $(objGrid).on('bindingcomplete', function(event) {
            if(check){
              check = 0;
              $(objGrid).jqxGrid('localizestrings', dLayout._CONST.localizationobj);
            }
               $(objGrid).jqxGrid("clearselection");
          }).on("pagesizechanged", function (event){
        }).on('rowclick', function(event) {
            if (event.args.rightclick) {
            $(objGrid).jqxGrid('selectrow', event.args.rowindex);
                    var scrollTop = $(window).scrollTop();
                    var scrollLeft = $(window).scrollLeft();
                    contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
                    return false;
            }
        }).on('celldoubleclick', function (event) {
              $(objGrid).jqxGrid('selectrow', event.args.rowindex);
              $('#editrow').trigger('click');
        });
        // initialize jqxGrid
        $(objGrid).jqxGrid({
            source: dataadapter,
            theme: theme,
            showfilterrow: true,
            filterable: true,
            sortable: true,
            virtualmode: true,
            pagermode: "default",
            pagesizeoptions: ['15', '30', '50'],
            pageable: true,
            width: '100%',
            height: '425',
            autorowheight:true,
            autoheight: true,
            ready: function(){

            },
            rendergridrows: function(obj){
              return obj.data;
            },
            pagesize: 15,
            enablebrowserselection: true,
            selectionmode: 'multiplerowsextended',
            altrows: true,
            columns: [
                      {text: 'ID', datafield: 'ListID', width: '5%',viewable: true,filtertype:false, editrules: {edithidden: true}, cellsalign: 'center'},
                      {text: 'Loại danh mục', filtertype: 'list', filteritems: filterlisttype, datafield: 'ListtypeName', width: '25%'},
                      {text: 'Mã đối tượng', datafield: 'Code', width: '15%'},
                      {text: 'Tên đối tượng', datafield: 'Name', width: '40%'},
                      {text: 'Thứ tự', datafield: 'Orders', width: '5%', cellsalign: 'center'},
                      {text: 'Trạng thái', datafield: 'Status', width: '10%', cellsalign: 'center',cellsrenderer: function (row, column, value) {

                                          if (value == 1) {
                                              value = 'Hoạt động';
                                          }else{
                                              value = 'Ngừng hoạt động';
                                          }
                                          return '<div style="text-align: center; margin-top: 4px;">' + value + '</div>';  
                                      }
                      }
                    ]
            });
     
    $('.jqx-menu-wrapper').remove();
    // create context menu
    var contextMenu = $("#ListMenu").jqxMenu({width: 200, height: 'auto', autoOpenPopup: false, mode: 'popup'});
    $(objGrid).on('contextmenu', function() {
          return false;
    });
    // handle context menu clicks.
    $("#ListMenu").on('itemclick', function(event) {
        var args = event.args;
        var rowindex = $(objGrid).jqxGrid('getselectedrowindex');
        switch($.trim($(args).attr('id'))){
          case 'mn-add':
            $('#addrow').trigger('click');
            break;
          case 'mn-edit':
            $(objGrid).jqxGrid('selectrow', rowindex);
            $('#editrow').trigger('click');
            break;
          case 'mn-delete':
            var rowid = $(objGrid).jqxGrid('getrowid', rowindex);
            var ListIDs = dList.obGridView.jqxGrid('getrowdata', rowindex).ListID;
            $.post(dList.urlPath + '/delete', {ListIDs: ListIDs}, function(data) {
                   dList.obGridView.jqxGrid('deleterow', rowid);
            });
            break;

        }        
    });
  });




</script>
